<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-22 10:26:43
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 15:31:57
 * @Description:
 *
-->

<template>
  <div ref="container" class="container">
    <ScaleBox
      v-if="showCtn"
      :width-design="1620"
      :height-design="840"
      :width-real="widthReal"
      :height-real="heightReal"
    >
      <div class="main">
        <div class="center">
          <div class="title">基于算网一体化资源调度模型的引擎图谱概览</div>
          <div class="start">统一算法接口/算法选择</div>
          <div class="box" @click="boxClick(1)">
            <div class="box-title">
              <div class="text">调度策略</div>
            </div>
            <div class="box-item">
              <div class="text">
                综合<span class="special">负载</span>评估调度算法
              </div>
            </div>
            <div class="box-item">
              <div class="text">
                综合<span class="special">成本</span>评估调度算法
              </div>
            </div>
            <div class="box-item">
              <div class="text">
                综合<span class="special">能效</span>评估调度算法
              </div>
            </div>
            <div class="box-item">
              <div class="text">
                综合<span class="special">SLA</span>评估调度算法
              </div>
            </div>
            <div class="box-item">
              <div class="text">
                多维融合<span class="special">一体</span>调度算法
              </div>
            </div>
          </div>
          <div class="box box2" @click="boxClick(2)">
            <div class="box-title">
              <div class="text">动态扩缩容</div>
            </div>
            <div class="box-item3">基于虚机级别的扩缩容</div>
            <div class="box-item3 right">基于容器级别的扩缩容</div>
            <div class="box-item4">跨集群场景的扩缩容</div>
          </div>
          <img
            class="down-arrow arrow1"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_down.gif"
            alt=""
          />
          <img
            class="down-arrow arrow2"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_down.gif"
            alt=""
          />
          <img
            class="down-arrow arrow3"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_down.gif"
            alt=""
          />
          <img
            class="down-arrow arrow4"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_down.gif"
            alt=""
          />
          <img
            class="down-arrow arrow5"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_down.gif"
            alt=""
          />
          <img
            class="down-arrow2"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_down_2.gif"
            alt=""
          />
          <img
            class="down-arrow2 arrow2-2"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_down_2.gif"
            alt=""
          />
          <img
            class="down-arrow3"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_down_3.gif"
            alt=""
          />
        </div>
        <div class="left-item left1">
          <div class="left-btn" @click="toMeasure()">算网度量模型</div>
          <img
            class="left-arrow"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_right.gif"
            alt=""
          />
        </div>
        <div class="left-item left2">
          <div class="left-btn" @click="toFlavor()">云商规格清单</div>
          <img
            class="left-arrow"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_right.gif"
            alt=""
          />
        </div>
        <div class="left-item left3">
          <div class="left-btn" @click="toFlavor()">云商价格清单</div>
          <img
            class="left-arrow"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_right.gif"
            alt=""
          />
        </div>
        <div class="left-item left4">
          <div class="left-btn" @click="toNode()">算网洞察</div>
          <img
            class="left-arrow"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_right.gif"
            alt=""
          />
        </div>
        <div class="right-item right1">
          <img
            class="right-arrow"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_right.gif"
            alt=""
          />
          <div class="right-btn">资源开通/调整</div>
        </div>
        <div class="right-item right2">
          <img
            class="right-arrow"
            src="~@/assets/imgs/scheduling-engine/gif_arrow_right.gif"
            alt=""
          />
          <div class="right-btn">资源调整</div>
        </div>
        <div v-if="showModal" class="modal-wrapper">
          <div :class="['modal-main', modalType == 1 ? 'main1' : 'main2']">
            <div class="title">
              {{ modalType == 1 ? "智能部署调度" : "智能扩缩容" }}
            </div>
            <div class="text">
              {{ modalType == 1 ? modalText1 : modalText2 }}
            </div>
            <img
              class="close"
              src="~@/assets/imgs/scheduling-engine/icon_close.png"
              alt=""
              @click="cancelModal"
            />
          </div>
        </div>
      </div>
    </ScaleBox>
  </div>
</template>

<script>
import ScaleBox from '@/components/ScaleBox2'

export default {
  name: 'SchedulingEngineIndex',
  components: {
    ScaleBox
  },
  data() {
    return {
      widthReal: 1920,
      heightReal: 1080,
      showCtn: false,
      showModal: false,
      modalType: 1,
      modalText1:
        '整合各维度策略目标，形成多维一体部署调度策略，在感知资源状态和服务状态的基础上，在各维度最优策略的基础上探寻多目标优化策略，同时优化多个用户所关心维度。同时，支持智能化决策调整，可基于资源和服务状态的变化进行部署调度决策调整。',
      modalText2:
        '感知资源状态信息，基于当前环境因素进行扩缩容参数调优；感知服务状态信息，基于当前业务因素进行扩缩容参数调优；学习历史数据，基于现存经验数据学习扩缩容参数优化策略。结合以上三点进行协同参数调优，进而实现自适应扩缩容参数配置。'
    }
  },
  mounted() {
    this.widthReal = this.$refs.container.clientWidth // 获取容器宽度
    this.heightReal = window.innerHeight - 90 // 获取容器高度
    this.showCtn = true
  },
  methods: {
    /**
     * @description: 取消弹窗
     * @return {*}
     */
    cancelModal() {
      this.showModal = false
    },
    /**
     * @description: 点击展示浮窗
     * @param {*} type
     * @return {*}
     */
    boxClick(type) {
      this.modalType = type
      this.showModal = true
    },
    /**
     * @description: 跳转到算网度量模型
     */
    toMeasure() {
      this.$router.push({
        path: '/scheduling-engine/measure'
      })
    },
    /**
     * @description: 跳转到云商规格清单
     */
    toFlavor() {
      this.$router.push({
        path: '/scheduling-engine/flavor'
      })
    },
    /**
     * @description: 跳转到节点监控
     */
    toNode() {
      this.$router.push({
        path: '/self-intelligence-ops/monitor',
        query: {
          tab: 'node'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";

.container {
  margin: 20px;

  .main {
    width: 1620px;
    height: 840px;
    background: url("~@/assets/imgs/scheduling-engine/bg.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;

    .center {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 360px;
      width: 847px;
      height: 769px;
      background: url("~@/assets/imgs/scheduling-engine/bg_center.png")
        no-repeat center;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        .textStyle(24px, 600, #FFFFFF);
        line-height: 33px;
        margin-top: 45px;
        text-shadow: 0px 1px 4px #00beff;
      }

      .start {
        margin-top: 33px;
        width: 764px;
        height: 62px;
        background: url("~@/assets/imgs/scheduling-engine/bg_center_start.png")
          no-repeat center;
        background-size: 100% 100%;
        line-height: 62px;
        text-align: center;
        .textStyle(24px, 600, #FFFFFF);
        text-shadow: 0px 0px 4px #00beff;
      }

      .box {
        cursor: pointer;
        margin-top: 37px;
        width: 751px;
        height: 227px;
        background: url("~@/assets/imgs/scheduling-engine/bg_center_box.png")
          no-repeat center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        transition-duration: 0.5s;

        &:hover {
          transform: scale(1.05);
          transition-duration: 0.5s;
        }

        .box-title {
          margin-left: 12px;
          margin-right: 15px;
          width: 75px;
          height: 205px;
          background: url("~@/assets/imgs/scheduling-engine/bg_center_item_1.png")
            no-repeat center;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .text {
            .textStyle(24px, 600, #FFFFFF);
            width: 25px;
            text-shadow: 0px 0px 4px #00beff;
            line-height: 34px;
          }
        }
        .box-item {
          margin-left: 8px;
          width: 115px;
          height: 211px;
          background: url("~@/assets/imgs/scheduling-engine/bg_center_item_2.png")
            no-repeat center;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          .text {
            .textStyle(16px, 500, #32c5ff);
            width: 42px;
            line-height: 23px;
            letter-spacing: 2px;
            text-shadow: 0px 0px 12px rgba(0, 183, 255, 0.63),
              0px 0px 4px rgba(0, 190, 255, 0.5);
            .special {
              color: #ffffff;
            }
          }
        }
      }
      .box2 {
        margin-top: 45px;
        position: relative;

        .box-title .text {
          line-height: 32px;
        }

        .box-item3 {
          position: absolute;
          top: 20px;
          left: 110px;
          width: 285px;
          height: 107px;
          background: url("~@/assets/imgs/scheduling-engine/bg_center_item_3.png")
            no-repeat center;
          background-size: 100% 100%;
          text-align: center;
          .textStyle(16px, 500, #FFFFFF);
          line-height: 103px;
          letter-spacing: 2px;
          text-shadow: 0px 0px 12px rgba(0, 183, 255, 0.63),
            0px 0px 4px rgba(0, 190, 255, 0.5);

          &.right {
            left: unset;
            right: 30px;
          }
        }

        .box-item4 {
          position: absolute;
          bottom: 5px;
          right: 29px;
          width: 612px;
          height: 113px;
          background: url("~@/assets/imgs/scheduling-engine/bg_center_item_4.png")
            no-repeat center;
          background-size: 100% 100%;
          text-align: center;
          .textStyle(16px, 500, #FFFFFF);
          line-height: 110px;
          letter-spacing: 2px;
          text-shadow: 0px 0px 12px rgba(0, 183, 255, 0.63),
            0px 0px 4px rgba(0, 190, 255, 0.5);
        }
      }

      .down-arrow {
        position: absolute;
        top: 168px;
        width: 17px;
        height: 75px;

        &.arrow1 {
          left: 208px;
        }
        &.arrow2 {
          left: 331px;
        }
        &.arrow3 {
          left: 454px;
        }
        &.arrow4 {
          left: 577px;
        }
        &.arrow5 {
          left: 700px;
        }
      }
      .down-arrow2 {
        position: absolute;
        top: 168px;
        left: 270px;
        width: 16px;
        height: 358px;
        &.arrow2-2 {
          left: 640px;
        }
      }
      .down-arrow3 {
        position: absolute;
        top: 168px;
        left: 448px;
        width: 16px;
        height: 450px;
      }
    }
  }

  .left-item {
    position: absolute;
    left: 58px;
    display: flex;
    align-items: center;

    &.left1 {
      top: 140px;
    }
    &.left2 {
      top: 300px;
    }
    &.left3 {
      top: 450px;
    }
    &.left4 {
      top: 600px;
    }

    .left-btn {
      cursor: pointer;
      width: 234px;
      height: 75px;
      background: url("~@/assets/imgs/scheduling-engine/bg_button_left.png")
        no-repeat center;
      background-size: 100% 100%;
      line-height: 75px;
      text-align: center;
      .textStyle(24px, 500, #FFFFFF);
      text-shadow: 0px 0px 9px rgba(50, 197, 255, 0.7);
    }
    .left-arrow {
      margin-left: -6px;
      width: 91px;
      height: 17px;
    }
  }

  .right-item {
    position: absolute;
    right: 40px;
    display: flex;
    align-items: center;

    &.right1 {
      top: 315px;
    }
    &.right2 {
      top: 600px;
    }

    .right-btn {
      width: 310px;
      height: 90px;
      background: url("~@/assets/imgs/scheduling-engine/bg_button_right.png")
        no-repeat center;
      background-size: 100% 100%;
      line-height: 90px;
      text-align: center;
      .textStyle(24px, 500, #FFFFFF);
      text-shadow: 0px 0px 9px rgba(50, 197, 255, 0.7);
    }
    .right-arrow {
      margin-right: -9px;
      width: 91px;
      height: 17px;
    }
  }

  .modal-wrapper {
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    z-index: 2;

    .modal-main {
      z-index: 3;
      position: absolute;
      top: 160px;
      left: 360px;
      width: 845px;
      height: 452px;
      background: url("~@/assets/imgs/scheduling-engine/bg_modal_1.png")
        no-repeat center;
      background-size: 100% 100%;

      &.main2 {
        background: url("~@/assets/imgs/scheduling-engine/bg_modal_2.png")
          no-repeat center;
        background-size: 100% 100%;
      }

      .title {
        position: absolute;
        top: 55px;
        left: 50%;
        transform: translateX(-50%);
        .textStyle(24px, 600, #FFFFFF);
        line-height: 30px;
        text-shadow: 0px 1px 4px #00beff;
      }

      .text {
        position: absolute;
        top: 156px;
        right: 75px;
        width: 275px;
        .textStyle(16px, 400, #FFFFFF);
        line-height: 30px;
      }

      .close {
        cursor: pointer;
        position: absolute;
        top: 30px;
        right: 40px;
        width: 25px;
        height: 25px;
        z-index: 4;
      }
    }
  }
}
</style>
